window.addEventListener('load' , function() {
    // 1.获取元素
    var arrow1 = this.document.querySelector('.arrow1')
    var arrow2 = this.document.querySelector('.arrow2')
    var focus = this.document.querySelector('.focus')
    var focusWidth = focus.offsetWidth
    // 2.鼠标经过focus 就显示隐藏左右按钮
    focus.addEventListener('mouseenter' , function() {
        arrow1.style.display = 'block';
        arrow2.style.display = 'block';
        clearInterval(timer)
        timer = null //清除定时器变量
    })
    focus.addEventListener('mouseleave' , function() {
        arrow1.style.display = 'none';
        arrow2.style.display = 'none';
        timer = this.setInterval(function(){
            // 手动调用点击事件
            arrow2.click()
        },2000)                       
    })
    // 3.动态生成小圆圈，有几张图片，我就生成几个小圆圈
    var ul = focus.querySelector('ul')    //实际开发中ul较多 所以我们特指focus中的ul
    var ol = focus.querySelector('.circle')
    // console.log(ul.children.length);  获取下图片的个数
    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个小li
        var li = this.document.createElement('li')
        // 记录当前小圆圈的索引号 通过自定义属性来做
        li.setAttribute('index' , i)
        // 把li插入到ol里面
        ol.appendChild(li)
    // 4.小圆圈的排他思想 我们可以直接生成小圆圈的同时直接绑定点击事件
       li.addEventListener('click',function(){
        // 把所有的li 清除current类名
        for (var i = 0; i < ol.children.length; i++) {
          ol.children[i].className = '';
        }
        // 当前的li 设置current 类名
        this.className = 'current'
    // 5.点击小圆圈，移动图片，当然移动的是ul
    // ul的移动距离 小圆圈的索引号乘以图片的宽度 注意是负值
    // 当我们点击某个li 就拿到当前小li的索引号
    var index = this.getAttribute('index')
    // 当我们点击了某个小li 就要把这个li 的索引号给 num
    num = index;
    // 当我们点击了某个小li 就要把这个li 的索引号给 circle
    circle= index;
    console.log(focusWidth);
    console.log(index);
    animate(ul,-index * focusWidth )
       })     
    }
    // 把ol里面的第一个小li设置类名为 current
    ol.children[0].className = 'current'
    // 6.克隆第一张图片放到ul 最后面
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)
    // 7.点击右侧按钮，图片滚动一张
    var num = 0
    // circle 控制小圆圈的播放
    var circle = 0
    // 节流阀
    var flag = true
    arrow2 
    arrow2.addEventListener('click' , function() {
       if(flag){
        flag = false //关闭节流阀
        // 如果走到了最后复制的一张图片，此时，我们的ul要快速复原 left为0
        if(num == ul.children.length - 1) {
            ul.style.left = 0
            num = 0
        }
        num++;
        animate(ul, -num * focusWidth , function() {
            flag = true //打开节流阀
        })
    // 8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
        circle++
        // 如果circle == 5 则说明走到最后我们克隆的这种图片了 我们就复原
        if (circle == ol.children.length) {
            circle = 0;
        }
        // 调用函数
        circleChange();
       }     
    })

    // 9.左侧按钮做法
    arrow1.addEventListener('click' , function() {
       if(flag) {
           flag = false
        // 如果走到了最后复制的一张图片，此时，我们的ul要快速复原 left为0
        if(num == 0) {
       num = ul.children.length - 1
        ul.style.left = -num * focusWidth + 'px'
    }
        num--;
        animate(ul, -num * focusWidth , function() {
            flag = true
        })
        circle--
        // 如果circle <0 则说明第一张图片 小圆圈要改为第5个小圆圈
        // if (circle < 0) {
        //     circle = ol.children.length - 1;
        // } 三元运算符写法
        circle = circle < 0 ? ol.children.length - 1 : circle
        // 调用函数
        circleChange();
       }
    })
    function circleChange() {
         // 先清除其余小圆圈的current类名
         for(var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留着当前的小圆圈的current类名
        ol.children[circle].className = 'current'
    }
    // 10.自动播放轮播图
    var timer = this.setInterval(function(){
        // 手动调用点击事件
        arrow2.click()
    },2000)
})